<template>
    <view class="page">
        <view class="top_box">
            <back :title="'登录/注册'" :isBack="true" :isBg="false"></back>

            <view class="hyy_box">
                <image src="https://rubbish.lwjcg.com/static/empty/Hello.png" mode="widthFix" />
            </view>
            <view class="Welcome_box">
                欢迎使用六久六智运
            </view>

        </view>
        <view class="lg_pic_box">
            <image src="https://build.lwjcg.com/uploads/waste.png" mode="scaleToFill" />
        </view>
        <!-- 登录 -->
        <!-- <button class="lgSubmit_box" type="primary" open-type="getPhoneNumber" @getphonenumber="headgetphonenumber">
            手机快捷登录
        </button> -->
        <view class="lgSubmit_box" @click="$noMultipleClicks(submit)">
            一键登录
        </view>

        <!-- 协议 -->
        <view class="agrent_box" @click="agrentBtn">
            <view class="cz_box">
                <image v-if="!agrentSta" src="https://rubbish.lwjcg.com/static/index/ySel.png" mode="scaleToFill" />
                <image v-else src="https://rubbish.lwjcg.com/static/index/ty.png" mode="scaleToFill" />
            </view>
            <view class="agrent_text_box">
                登录及接受
                <text style="color: rgba(26, 194, 121, 1);" @click.stop="dregs"> 六久六智运用户协议 </text>
                未注册账号将自动注册
            </view>
        </view>

        <u-popup v-model="getnickshow" mode="bottom" :show="getnickshow" round='16rpx' :mask-close-able="false">
            <view class="getnickbox">

                <view class="flex_align_center">
                    <image :src="project.logo" class="logoimg" mode="aspectFit"></image>
                    <view class="name">
                        {{ project.name }}
                        <text>申请</text>
                    </view>
                </view>
                <view class="m1 mt30">获取你的头像、昵称</view>
                <view class="m2">展示个人信息</view>
                <view class="xin1">
                    <button type="default" class="flex_spacebetween buttoncss" open-type="chooseAvatar"
                        @chooseavatar="chooseavatar">
                        <view class="flex_align_center toubox">
                            <view class="t1">头像</view>
                            <view v-if="file == ''" class="avatarbox">
                                <u-icon name="account-fill" size="50" color="#999"></u-icon>
                            </view>
                            <image v-else :src="file" class="avatarimg"></image>
                        </view>
                        <u-icon name="arrow-right" size="25" color="#999"></u-icon>
                    </button>
                </view>
                <view class="nick">
                    <view class="n1">昵称:</view>
                    <input type="nickname" @blur="bindBlur" v-model="nickname" placeholder="请输入昵称">
                </view>
                <view class="nick">
                    <view class="n1">手机号:</view>
                    <button class="phone_box" open-type="getPhoneNumber" @getphonenumber="headgetphonenumber">
                        {{ phoneNumber || '点击获取手机号' }}
                    </button>

                </view>
                <view class="enter_box" @click="$noMultipleClicks(loginWeixin)">
                    确认
                </view>
            </view>
        </u-popup>

    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            noClick: true,//防连点
            getnickshow: false,//获取昵称头像弹窗
            agrentSta: false,//是否同意协议
            js_code: '',//微信登录获取的code
            project: {//小程序名字/logo
                name: '',
                logo: '',
            },
            file: '',
            nickname: '',
            openId: '',
            avatarUrl: '',
            phoneNumber: '',//用户手机号
        }
    },
    onLoad(options) {
        if (options.getnickshow) {
            this.getnickshow = true
        }

    },
    onShow() {
        this.gainNa()
    },
    methods: {
        dregs() {
            uni.navigateTo({
                url: '/userPage/protocol/protocol?systemSta=' + '1'
            })
        },
        gainNa() {
            // 获取项目的 logo 和 名称
            uni.getSystemInfo({
                success: (res) => {
                    console.log(res)
                    this.project.name = res.appName
                }
            })
            this.project.logo = __wxConfig.accountInfo.icon
        },
        // 获取头像
        chooseavatar(e) {
            this.file = e.detail.avatarUrl
            var uploadurl = "https://build.lwjcg.com/api/user/upload?token=" + uni.getStorageSync("USERINFO")
            uni.uploadFile({
                url: uploadurl,
                filePath: this.file,
                name: 'file',
                formData: {
                    'openid': this.openId
                },
                success: (res) => {
                    let urlData = JSON.parse(res.data)
                    this.avatarUrl = urlData.data.filepath


                }
            });
        },
        headgetphonenumber(e) {
            let data = {
                code: e.detail.code
            }
            this.$Request.post(this.$api.user.userPhone, data).then(res => {
                if (res.code == 200) {
                    this.phoneNumber = res.data.phone
                }
            })
        },
        // 获取昵称
        bindBlur(e) {
            this.nickname = e.detail.value
        },
        // 一键登录
        submit() {
            if (this.agrentSta) {
                var that = this
                uni.login({
                    provider: 'weixin',
                    success: (res) => {
                        that.js_code = res.code
                        that.getUser()
                        console.log(res)
                    },
                    fail: function (err) {
                        console.log("登录授权失败", err);
                    }
                })
            } else {
                uni.showToast({
                    title: '请先同意协议',
                    icon: 'none'
                })
            }

        },
        // 确认微信登录
        loginWeixin() {
            if (this.nickname == '' && this.file == '' && this.phoneNumber == '') {
                uni.showToast({
                    title: '请获取头像，昵称，手机号',
                    icon: 'none'
                })
            } else if (this.nickname == '') {
                uni.showToast({
                    title: '请输入昵称',
                    icon: 'none'
                })
            } else if (this.file == '') {
                uni.showToast({
                    title: '请选择头像',
                    icon: 'none'
                })
            } else if (this.phoneNumber == '') {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
            } else {
                this.editInfo()
            }
        },

        // 登录
        getUser() {
            let data = {
                code: this.js_code,
                pid: uni.getStorageSync('pid')
            }
            this.$Request.post(this.$api.user.register, data).then(res => {
                if (res.code == 200) {
                    this.token = res.data.token
                    uni.setStorageSync("USERINFO", res.data.token)
                    this.info()
                }
            })
        },

        // 判断用户信息中是否存在头像昵称
        info() {
            this.$Request.post(this.$api.user.info).then(res => {
                if (res.code == 200) {
                    this.openId = res.data.openid
                    uni.setStorageSync('openId', res.data.openid)
                    uni.setStorageSync('survey_id', res.data.survey_id)
                    uni.setStorageSync('user', res.data)
                    if (res.data.avatar === '' || res.data.nickname === '') {
                        this.getnickshow = true
                    } else {
                        uni.showToast({
                            title: '登录成功',
                            icon: 'none'
                        })

                        setTimeout(() => {
                            uni.switchTab({
                                url: '/pages/index/index'
                            })
                        }, 600)
                    }
                }

            })
        },
        // 修改信息
        editInfo() {
            let data = {
                nickname: this.nickname,
                avatar: this.avatarUrl,
            }
            this.$Request.post(this.$api.user.edit, data).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '登录成功',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/index/index'
                        })
                    }, 600)
                }
            })

        },
        // 协议
        agrentBtn() {
            this.agrentSta = !this.agrentSta
        },

    }
}
</script>
<style lang="scss" scoped>
/deep/.u-drawer-bottom {
    background-color: rgba(246, 246, 246, 0) !important;
}

.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .top_box {
        width: 100%;
        height: 460rpx;
        background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(226, 244, 243, 0) 100%);
        margin-bottom: 53rpx;

        .hyy_box {
            width: 238rpx;
            margin-top: 50rpx;
            margin-left: 73rpx;

            image {
                width: 100%;
            }
        }

        .Welcome_box {
            width: 336rpx;
            height: 58rpx;
            font-size: 48rpx;
            font-weight: 400;
            line-height: 58rpx;
            color: rgba(0, 0, 0, 1);
            margin-left: 73rpx;

        }
    }

    .lg_pic_box {
        width: 694rpx;
        height: 554rpx;
        border-radius: 0rpx 0rpx, 134rpx, 74rpx;

        margin: auto;

        image {
            width: 100%;
            height: 100%;
        }

    }

    .lgSubmit_box {
        width: 652rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        margin: 24rpx auto;
        font-size: 36rpx;
        font-weight: 400;
        line-height: 60rpx;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 100rpx;
    }

    .agrent_box {
        width: 652rpx;
        height: 40rpx;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-content: center;

        .cz_box {
            width: 30rpx;
            height: 30rpx;

            image {
                width: 100%;
                height: 100%;
            }

        }

        .agrent_text_box {
            width: 616rpx;
            height: 30rpx;
            line-height: 26rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: rgba(123, 135, 135, 1);
        }
    }
}

.getnickbox {
    padding: 40rpx 20rpx;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #fff;

    .logoimg {
        width: 50rpx;
        height: 50rpx;
        border-radius: 10rpx;
    }

    .name {
        margin-left: 20rpx;

        text {
            margin-left: 10rpx;
        }
    }

    .m1 {
        font-weight: 500;
    }

    .m2 {
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #f2f2f2;
        color: #999;
        padding-top: 10rpx;
        font-size: 24rpx;
    }

    .xin1 {
        border-bottom: 1rpx solid #f2f2f2;
        margin-bottom: 30rpx;

        .toubox {
            padding: 10rpx 0;
            display: flex;
            align-items: center;

            .t1 {
                font-size: 28rpx;
                margin-right: 30rpx;
            }

            .avatarbox {
                width: 80rpx;
                height: 80rpx;
                border-radius: 20rpx;
                border: 1rpx solid #f2f2f2;
            }

            .avatarimg {
                width: 80rpx;
                height: 80rpx;
                border-radius: 20rpx;
            }
        }
    }


    .buttoncss {
        background-color: #fff;
        border-radius: 0px;
        border: 0rpx solid transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    button::after {
        border: 0px solid rgba(0, 0, 0, .2);
    }

    .nick {
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #f2f2f2;
        display: flex;
        align-items: center;
        padding-left: 14px;
        padding-right: 14px;
        margin-bottom: 10rpx;

        .n1 {
            font-size: 28rpx;
            margin-right: 30rpx;
        }

        .phone_box {
            background: none;
            width: 530rpx;
            font-size: 28rpx;
            color: #999;
            text-align: left;
            padding-left: 0;

        }
    }

    .enter_box {
        width: 280rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        margin: 10rpx auto;
        text-align: center;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

    }

    .mt30 {
        margin-top: 30rpx;
    }
}

.flex_align_center {
    display: flex;
    align-items: center;
}
</style>